<template>
  <el-dialog
    v-model="props.myShow"
    title="选择商品"
    @close="emit('myHideFn')"
    @open="openFn"
  >
    <div class="productBox">
      <div class="top">
        <el-input v-model="Params.keyword" placeholder="商品搜索名称">
          <template #append
            ><el-button :icon="Search" @click="SearchFn"
          /></template>
        </el-input>
      </div>
    </div>
    <div>
      <el-table
        :data="myList"
        border
        style="width: 100%"
        @select="selectFn"
        @selectAll="selectAllFn"
      >
        <el-table-column type="selection" />
        <el-table-column prop="title" label="专题名称" align="center" />
        <el-table-column prop="categoryName" label="所属分类" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center">
          <template #default="{ row }">
            <div>{{ formateDate(row.createTime) }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        v-model:current-page="Params.pageNum"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { inject } from "vue";
import { TanSubjectApi, subjectListApi, SubjectCreateApi } from "../api/index";
import { formateDate } from "@/utils/index";
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const total = ref(0);
const myArray = ref([]);
const selectAllFn = (selection: any) => {
  // console.log(selection);
  myArray.value = selection;
};
const selectFn = (selection: any) => {
  //  console.log(selection);
  myArray.value = selection;
};

let emit = defineEmits(["myShowFn", "myHideFn"]);
let props = defineProps({
  myShow: {
    type: Boolean,
    default: false,
  },
  product: {
    type: String,
    default: "",
  },
});

// 对话框点击确定回调
const submit = () => {
  ElMessageBox.confirm("使用要进行添加操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      SubjectCreateApi(myArray.value).then((res) => {
        // console.log(res);
        emit("myHideFn");
        openFn();
      });
    })
    .catch(() => {});
};
// 获取注入的数据
const myList = ref<ProductList>();
//  let myLists = inject("myList");
// 声明货号数据

// console.log(myList);

// 分页数据
const Params = reactive<smsData>({
  pageNum: 1,
  pageSize: 5,
  keyword: "",
});
const handleCurrentChange = (val: number) => {
  //   console.log(`current page: ${val}`)
  TanSubjectApi(val, Params.pageSize).then((res) => {
    console.log(res.data.list);
    myList.value = res.data.list;
    total.value = res.data.total;
  });
};

// 商品搜索请求数据

const SearchFn = () => {
  subjectListApi(Params.keyword, Params.pageNum, Params.pageSize).then(
    (res) => {
      // console.log(res.data.list);
      if (res.code === 200) {
        myList.value = res.data.list;
        total.value = res.data.total;
      }
    }
  );
};

const openFn = () => {
  TanSubjectApi(Params.pageNum, Params.pageSize).then((res) => {
    // console.log(res.data.list);
    if (res.code === 200) {
      myList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
</script>

<style scoped lang="less">
.productBox {
  .top {
    width: 250px;
    margin-bottom: 20px;
  }
}
.page {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>
